<template>
  <div class="song-audio">
    <audio id="player"
           :src="url"
    controls="controls"
           preload="true"
           @canplay="startPlay"
           @ended="ended"
    >

    </audio>

  </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  name: "SongAudio",
  computed:{//监控
    ...mapGetters([
      'id',
      'url',
      'isPlay'
    ])
  },
  watch:{
    isPlay:function () {
      this.toggleplay();
    }
  },
  /*data(){
    return{
      src:"http://localhost:8888//song/song/1611917716467天下.mp3",
    }
  },*/

  methods:{
    startPlay(){
      let player=document.querySelector('#player');
      player.play();
    },

    ended(){
      this.isPlay=false;
    },

    toggleplay(){
      let player=document.querySelector('#player');
      if(this.isPlay){//如果this.isPlay是true那么就播放
        player.play();
      }else {
        player.pause();//否则就暂停
      }
    }
  }
}
</script>

<style scoped>
.song-audio{
  display: none;

}


</style>
